<template>
  <span>
    <template v-if="value">
      <template v-for="(item, index) in value.split(',')">
        <span :style="index > 0 ? 'margin-left: 10px' : ''">
          <span class="yq-capsule-left">{{ item.split(':')[0] }}</span>
          <span class="yq-capsule-right">{{ item.split(':')[1] }}</span>
        </span>
      </template>
    </template>
  </span>
</template>

<script>
export default {
  name: "YqPropCapsule",
  props: {
    // 胶囊数据格式："key1:name1,key2:name2,key3:name3"
    value: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped>
.yq-capsule-left {
  border: 1px solid #777777;
  background: #777777;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2px;
  padding-right: 2px;
}

.yq-capsule-right {
  border: 1px solid #777777;
  background: #fff;
  color: #777777;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 4px;
  padding-right: 4px;
}
</style>